<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<style>
    *{
        margin: 0;
        padding: 0;
    }

    body{
        background-color: #000;
    }

    .container{

    }

    .faulttext{
        color: #fff;
        font-size: 5em;
        letter-spacing: .5em;
        position: absolute;
    }

    .faulttext_fault::after,
    .faulttext_fault::before{
        content: "CONTEXT";
        position: absolute;
        left: 0;
        top: 0;
        mix-blend-mode: screen;
    }


    .faulttext_fault::after{
        color: #ff0000;
        transform: translateX(2%);
    }

    .faulttext_fault::before{
        color: #0000ff;
        transform: translateX(-2%);
    }
</style>


<div class="container" onclick="faulttext.fault()">
    <p class="faulttext">CONTEXT</p>
    <p class="faulttext">CONTEXT</p>
    <p class="faulttext">CONTEXT</p>
    <p class="faulttext">CONTEXT</p>
</div>

<script>
    const faulttext = {
        player:{},
        texts:[],
        init(){
            this.texts = [...document.getElementsByClassName("faulttext")]
        },
        fault(){
            clearInterval(this.player)

            setTimeout(()=>{
                clearInterval(this.player)
                this.texts.forEach(text=>{
                    text.classList.remove("faulttext_fault")
                    text.style.transform =""
                    text.style.clipPath =""
                })
            },1000)



            this.player = setInterval(()=>{
                this.texts.forEach((text)=>{
                    text.classList.add("faulttext_fault")
                    text.style.transform = `translate(${Math.random()*60 -30}%,${Math.random()*60 -30}%)`
                    let x = Math.random() * 100
                    let y = Math.random() * 100
                    let h = Math.random() * 50+50
                    let w = Math.random() * 40+10

                    text.style.clipPath = `polygon(${x}% ${y}%, ${x + w}% ${y}%, ${x + w}% ${y + h}%, ${x}% ${y + h}%)`

                })
            },30)

        }
    }


    faulttext.init()
</script>

</body>
</html>
